<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="webpack基于 Node.js 
 使用基本步骤 1.运行npm init初始化项目 2.创建项目基本的目录结构 3.在项目根目录中创建webpack.config.js配置文件 4.在配置文件中配置 入口的js文件和输出文件 5.配置安装实时打包工具webpack-dev-server，需要安">
    

    <!--Author-->
    
        <meta name="author" content="John Doe">
    

    <!--Open Graph Title-->
    
        <meta property="og:title" content="Webpack使用"/>
    

    <!--Open Graph Description-->
    

    <!--Open Graph Site Name-->
    <meta property="og:site_name" content="Hexo"/>

    <!--Type page-->
    
        <meta property="og:type" content="article" />
    

    <!--Page Cover-->
    

        <meta name="twitter:card" content="summary" />
    

    <!-- Title -->
    
    <title>Webpack使用 - Hexo</title>

    <!-- Bootstrap Core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Gallery -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />

    <!-- Google Analytics -->
    


    <!-- favicon -->
    
	
</head>


<body>

    <!-- Menu -->
    <!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">逐风</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                
                    <li>
                        <a href="/">
                            
                                Home
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/archives">
                            
                                Archives
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/tags">
                            
                                Tags
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="/categories">
                            
                                Categories
                            
                        </a>
                    </li>
                
                    <li>
                        <a href="https://github.com/klugjo/hexo-theme-clean-blog">
                            
                                <i class="fa fa-github fa-stack-2x"></i>
                            
                        </a>
                    </li>
                
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

    <!-- Main Content -->
    <!-- Page Header -->
<!-- Set your background image for this header in your post front-matter: cover -->

<header class="intro-header" style="background-image: url('http://www.codeblocq.com/assets/projects/hexo-theme-clean-blog/img/home-bg.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>Webpack使用</h1>
                    
                    <span class="meta">
                        <!-- Date and Author -->
                        
                        
                            2017-10-25
                        
                    </span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">

            <!-- Tags and categories -->
           

            <!-- Gallery -->
            

            <!-- Post Main Content -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <p>webpack基于 Node.js </p>
<p> 使用基本步骤<br> 1.运行npm init初始化项目<br> 2.创建项目基本的目录结构<br> 3.在项目根目录中创建webpack.config.js配置文件<br> 4.在配置文件中配置 入口的js文件和输出文件<br> 5.配置安装实时打包工具webpack-dev-server，需要安装webpack(由于只有那些安装到全局 -g 的工具，才能在 终端中正常执行，所以在package.json文件中配置)在scripts节点下新增 “dev”: “webpack-dev-server –open –port 3000 –contentBase src –hot”指令( 自动刷新，自动打开浏览器，指定端口号，指定启动的目录，启用热刷新)命令窗口中运行 npm run dev<br> 6.导入在内存中生成 HTML 页面的 插件html-webpack-plugin<br> 7.由于webpack本身只支持js的打包处理，需下载配置第三方模块 加载器css/sass/less等</p>
<p> 详解<br> webpack作用<br> 1.webpack 能够处理 JS 文件的互相依赖关系；</p>
<ol>
<li>webpack 能够处理JS的兼容问题，把 高级的es6等、浏览器不支持的语法，转为 低级的，浏览器能正常识别的语法</li>
</ol>
<p>关于webpack-dev-server 这个工具，来实现自动打包编译的功能</p>
<ol>
<li>运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖</li>
<li>webpack-dev-server 想要正常运行，要求，在本地项目中，安装 cnpm i webpack -D</li>
<li><p>webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到 实际的<br>物理磁盘上；而是，直接托管到了 电脑的内存中，所以，我们在 项目根目录中，有一个看不见的打包好的 bundle.js;<br>4.需要在html中引入这个隐形的bundle.js,最后开发完成再替换实际的bundle.js路径,运行webpack打包一下</p>
<p>在package.json的script中配置  自动刷新，自动打开浏览器，指定端口号，指定启动的目录，启用热刷新<br> “dev”: “webpack-dev-server –open –port 3000 –contentBase src –hot”,</p>
<p>命令窗口中运行 npm run dev</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div></pre></td><td class="code"><pre><div class="line"> webpack.config.js的配置示例</div><div class="line"> </div><div class="line">const path = require(&apos;path&apos;)</div><div class="line">const webpack = require(&apos;webpack&apos;)</div><div class="line">// html-webpack-plugin导入在内存中生成 HTML 页面的 插件</div><div class="line">// 只要是插件，都一定要 放到 plugins 节点中去</div><div class="line">// 这个插件的两个作用：</div><div class="line">//  1. 自动在内存中根据指定页面生成一个内存的页面</div><div class="line">//  2. 自动，把打包好的 bundle.js 追加到页面中去</div><div class="line">const htmlWebpackPlugin = require(&apos;html-webpack-plugin&apos;)</div><div class="line"></div><div class="line">// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象</div><div class="line">module.exports = &#123;</div><div class="line">  // 指定 入口 和 出口</div><div class="line">  entry: path.join(__dirname, &apos;./src/main.js&apos;),// 入口，表示，要使用 webpack 打包哪个文件</div><div class="line">  output: &#123; // 输出文件相关的配置</div><div class="line">    path: path.join(__dirname, &apos;./dist&apos;), // 指定 打包好的文件，输出到哪个目录中去</div><div class="line">    filename: &apos;bundle.js&apos; // 这是指定 输出的文件的名称</div><div class="line">  &#125;,</div><div class="line">  devServer: &#123; // 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式很麻烦</div><div class="line">    open: true, // 自动打开浏览器</div><div class="line">    port: 3000, // 设置启动时候的运行端口</div><div class="line">    contentBase: &apos;src&apos;, // 指定托管的根目录</div><div class="line">    hot: true // 启用热更新 的 第1步</div><div class="line">  &#125;,</div><div class="line">  plugins: [ // 配置插件的节点</div><div class="line">    new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第2步</div><div class="line">    new htmlWebpackPlugin(&#123; // 创建一个 在内存中 生成 HTML  页面的插件</div><div class="line">      template: path.join(__dirname, &apos;./src/index.html&apos;), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面</div><div class="line">      filename: &apos;index.html&apos; // 指定生成的页面的名称</div><div class="line">    &#125;)</div><div class="line">  ],</div><div class="line">  module: &#123; // 这个节点，用于配置 所有 第三方模块 加载器 </div><div class="line">    rules: [ // 所有第三方模块的 匹配规则</div><div class="line">      &#123; test: /\.css$/, use: [&apos;style-loader&apos;, &apos;css-loader&apos;] &#125;, //  配置处理 .css 文件的第三方loader 规则</div><div class="line">      &#123; test: /\.less$/, use: [&apos;style-loader&apos;, &apos;css-loader&apos;, &apos;less-loader&apos;] &#125;, //配置处理 .less 文件的第三方 loader 规则</div><div class="line">      &#123; test: /\.scss$/, use: [&apos;style-loader&apos;, &apos;css-loader&apos;, &apos;sass-loader&apos;] &#125;, // 配置处理 .scss 文件的 第三方 loader 规则</div><div class="line">    ]</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>启用在内存中生成 HTML 页面的 插件 作用：自动在内存中根据指定页面生成一个内存的页面<br>自动，把打包好的 bundle.js 追加到页面中去，不用手写啦，html中什么文件都不用引入了</p>
<p>webpack 打包好的 bundle.js 中，默认是启用严格模式的，想把 webpack 打包时候的严格模式禁用掉；查看这个插件的说明 babel-plugin-transform-remove-strict-mode</p>
</li>
</ol>


                
            </div>

            <!-- Comments -->
            
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    


                </div>
            
        </div>
    </div>
</article>

    <!-- Footer -->
    <hr />

<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                    

                    

                    
                        <li>
                            <a href="https://github.com/klugjo/hexo-theme-clean-blog" target="_blank">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                                </span>
                            </a>
                        </li>
                    

                    

                    

                    
                </ul>
                <p class="copyright text-muted">&copy; 2018 John Doe<br></p>
                <p class="copyright text-muted">Original Theme <a target="_blank" href="http://startbootstrap.com/template-overviews/clean-blog/">Clean Blog</a> from <a href="http://startbootstrap.com/" target="_blank">Start Bootstrap</a></p>
                <p class="copyright text-muted">Adapted for <a target="_blank" href="https://hexo.io/">Hexo</a> by <a href="http://www.codeblocq.com/" target="_blank">Jonathan Klughertz</a></p>
            </div>
        </div>
    </div>
</footer>


    <!-- After footer scripts -->
    
<!-- jQuery -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Bootstrap -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- Gallery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

<!-- Disqus Comments -->



</body>

</html>